﻿<div class="ui-widget-content">
    <h3>Datepicker</h3>
    <p>Cria um calendário para seleção de datas.
    <br />
    <p>Por exemplo, isto é um elemento <span class="codigo">&lt;input type="text" /&gt;</span>: <input id="meu_datepicker1" type="text" /></p>
    <p>E este é o código que faz a mágica acontecer: <span class="codigo">$("#meu_datepicker").datepicker();</span></p>
    
    <br />
    <p>
        Data Restrita: <input id="meu_datepicker2" type="text" /> -
        <code>$("#meu_datepicker").datepicker({ minDate: -10, maxDate: "+1M +10D" });</code>
    </p>

    <br />
    <p>
        <div style="float: left; width: 250px">
            <div id="meu_datepicker3"></div>
        </div>

        <div style="float: left; margin-left: 5px; padding-top: 50px; width: 500px">
            Para ter o Datepicker direto na tela (e não dropdown), basta aplicar a função datepicker() em um elemento &lt;div&gt;:
            <code>$("#meu_div_datepicker").datepicker();</code>
        </div>

        <div style="clear: both;"></div>
    </p>

    <p><button id="botao_regiao">Configuração de localização do Datepicker</button></p>

    <div id="formatacao_datepicker_regional" title="Configuração de localização" style="display: none;">
        <pre>$.datepicker.regional["pt-BR"] = {
    closeText: "Fechar",
    prevText: "&lt;Anterior",
    nextText: "Próximo&gt;",
    currentText: "Hoje",
    monthNames: ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],
    monthNamesShort: ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"],
    dayNames: ["Domingo","Segunda-feira","Terça-feira","Quarta-feira","Quinta-feira","Sexta-feira","Sábado"],
    dayNamesShort: ["Dom","Seg","Ter","Qua","Qui","Sex","Sáb"],
    dayNamesMin: ["Dom","Seg","Ter","Qua","Qui","Sex","Sáb"],
    weekHeader: "Sm",
    dateFormat: "dd/mm/yyyy",
    firstDay: 0,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ""
};
$.datepicker.setDefaults($.datepicker.regional["pt-BR"]);</pre>
    </div>

    <script type="text/javascript">
        inicializador.datepickerInit = function() {
            $("#meu_datepicker1").datepicker();
            $("#meu_datepicker2").datepicker( { minDate: -10, maxDate: "+1M +10D" } );
            $("#meu_datepicker3").datepicker();
            $("#botao_regiao").button().click(function () {
                $("#formatacao_datepicker_regional").dialog({ width: 700, modal: true });
            });
        };
    </script>
</div>